<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Babyactivities Social Diary</title>
	<link rel='stylesheet' href='resources/css/style.css' type='text/css' media='all' />
	<link rel='stylesheet' href='resources/css/grid.css' type='text/css' media='all' />
	<link rel="stylesheet" href="resources/css/login-blue.css" type='text/css' media='all' />
	<link href="http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic" rel="stylesheet" />
	<link href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic" rel="stylesheet" />
	<script type="text/javascript" src="resources/compiled/lib/jquery-min.js"></script>
	<script type="text/javascript" src="resources/compiled/js/blocksit.js"></script>
	<script src="resources/js/modernizr-1.5.min.js"></script>
	<script src="resources/js/jquery-1.8.2.min.js"></script>
	<script src="resources/js/jquery.lightbox_me.js" charset="utf-8"></script>
	<script src="resources/js/vendor/jquery.ui.widget.js"></script>
	<script src="resources/js/loginpage.js"></script>
<script>
	$(document).ready(function() {
		//vendor script
		$('#header').css({
			'top' : -50
		}).delay(1000).animate({
			'top' : 0
		}, 800);

		$('#footer').css({
			'bottom' : -15
		}).delay(1000).animate({
			'bottom' : 0
		}, 800);

		//blocksit define
		$(window).load(function() {
			$('#container').BlocksIt({
				numOfCol : 4,
				offsetX : 8,
				offsetY : 8
			});
		});

		//window resize
		var currentWidth = 1100;
		$(window).resize(function() {
			var winWidth = $(window).width();
			var conWidth;
			if (winWidth < 660) {
				conWidth = 440;
				col = 2
			} else if (winWidth < 880) {
				conWidth = 660;
				col = 3
			} else if (winWidth < 1100) {
				conWidth = 880;
				col = 4;
			} else {
				conWidth = 1100;
				col = 5;
			}

			if (conWidth != currentWidth) {
				currentWidth = conWidth;
				$('#container').width(conWidth);
				$('#container').BlocksIt({
					numOfCol : col,
					offsetX : 8,
					offsetY : 8
				});
			}
		});
		/* $('#loginForm').submit(function() {
		  alert('Handler for .submit() called.');
		  return false;
		}); */
	});
	function changeDate(i){
		var e = document.getElementById('day');
		var dt = new Date();
			while(e.length>0)
				e.remove(e.length-1);
		var j=-1;
			if(i=="na") {
				k=0;
			} else if(i==2) {
				k=28;
			} else if(i==4||i==6||i==9||i==11) {
				k=30;
			} else {
				k=31;
			}
			while(j++<k){
				var s=document.createElement('option');
				var e=document.getElementById('day');
				if(j==0){
					s.text="Day";
					s.value="na";
					try{
						e.add(s,null);
					}catch(ex){
						e.add(s);
					}
				} else{
					s.text=j;
					s.value=j;
					try{
						e.add(s,null);
					}catch(ex){
						e.add(s);
					}
				}
			}
			var y = dt.getFullYear() + 1;
			while (y-->1909){
				var s = document.createElement('option');
				var e = document.getElementById('year');
				s.text=y;
				s.value=y;
				try {
					e.add(s,null);
				}catch(ex){
					e.add(s);
				}
			}
		}
		
</script>
</head>
<body>

	<!-- Content -->
	<section id="wrapper">
		<!-- Header -->

		<header id="header">
			<div id="logo">
				<h4>Babytivities</h4>
			</div>
			<!-- <div id="backlinks">
				<ul>
					<li><a href="home.html">Home</a></li>
					<li><a href="compose_message.html">Message</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="profile.html">Profile</a></li>
				</ul>
			</div> -->
		</header>
		<div class="clearfix">&nbsp;</div>

		<div id="main_wrap" class="container_12">
			<div style="float:left">
				<img src="resources/image/babytivities-front-pic.png" />
			</div>
			<div id="wrap_loginbar">
				<form action="services/manager/login" method="post" id="loginForm" onsubmit="javascript:return checkloginForm(this);">
					<p>
						<label for="username">user name</label>
						<input type="text" id="username" name="username"/>
					</p>
					<p>
						<label for="password">password</label>
						<input type="password" id="password" name="password"/>
					</p>
					<p style="float:right;margin-right:20px;">
						<input type="submit" id="login" style="width: 80px" value="login" /><span style="margin-left:20px;"><a id="a" onClick="javascript:formResetLogin()" href="#">Sign up</a></span>
					</p>
				</form>
			</div>
			<div id="wrap_loginbar2" style="display:none;">
				<form action="services/manager/signup" method="post" id="signupForm" onsubmit="return checksignupForm(this);">
					<p>
						<label for="username">user name</label>
						<input type="text" id="username" name="username" placeholder="username"/>
					</p>
					<p>
						<label for="email address">email address</label>
						<input type="text" id="email" name="email" placeholder="email address"/>
					</p>
					<p>
						<label for="password">password</label>
						<input type="password" id="password" name="password" placeholder="password"/>
					</p>
					<p>
						<label for="Birthday">Birthday</label>
						<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
							<option value="na">Month</option>
							<option value="1">January</option>
							<option value="2">February</option>
							<option value="3">March</option>
							<option value="4">April</option>
							<option value="5">May</option>
							<option value="6">June</option>
							<option value="7">July</option>
							<option value="8">August</option>
							<option value="9">September</option>
							<option value="10">October</option>
							<option value="11">November</option>
							<option value="12">December</option>
						</select>
						<select name="day" id="day">
							<option value="na">Day</option>
						</select>
						<select name="year" id="year">
							<option value="0">Year</option>
						</select>
					</p>
					<p>
						<label for="Gender">Gender</label>
						<input type="radio" name="sex" value="male">Male
						<input type="radio" name="sex" value="female">Female
					</p>
					<p style="float:right;margin-right:20px;">
						<input type="submit" id="signup" style="width: 80px" value="signup" /><span style="margin-left:20px;"><a id="close_x" class="close sprited" onClick="javascript:formResetSignup()" href="#">login</a></span>
					</p>
				</form>
			</div>
		</div>

	</section>

	<!-- Footer -->
	<footer id="footer">
		<span>&copy; 2012 <a href="#">babytivities</a></span>
	</footer>

</body>
</html>